<template>
  <!-- 弹窗 -->
  <el-drawer
    v-model="dialog.visible"
    size="100%"
    direction="btt"
    :with-header="false"
    @close="closeDialog"
    append-to-body
  >
    <div class="drawer-body">
      <form-generator v-if="showDesign" />
    </div>
    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { saveOrUpdateBridge, getBridgeById } from "@/api/report/bridge.api";
import { BridgeForm } from "@/api/report/bridge.types";
import formGenerator from "@/views/form-generator/index";

// 声明Emits
const emit = defineEmits(["update:modelValue", "success"]);

const props = defineProps({
  modelValue: {
    type: Object,
    default: undefined,
  },
});

const dialog = reactive({
  visible: props.modelValue?.visible || false,
  title: "修改桥梁结构信息",
});

const settingFormRef = ref(ElForm);
const formData = ref(null);
const showDesign = ref(true);

// 添加watch监听props变化
watch(
  () => props.modelValue?.visible,
  (newVal) => {
    dialog.visible = newVal;
    clearForm();
    getById();
  }
);

const showDesignBtn = () => {
  showDesign.value = true;
};

// 修改closeDialog方法，添加emit
const closeDialog = () => {
  dialog.visible = false;
  emit("update:modelValue", { ...props.modelValue, visible: false });
};

const getById = async () => {
  const res = await getBridgeById({ id: props.modelValue?.id });
  Object.assign(formData, res.data);
};

//表单提交事件
async function handleSubmit() {
  emit("success");
  closeDialog();
}

const clearForm = () => {};
</script>

<style lang="scss" scoped>
.drawer-body {
  width: 100%;
  height: 100%;
}
</style>
